<template>
  <div class="login-container">
    <el-form
      :model="loginModel"
      :rules="loginRules"
      status-icon
      ref="loginModel"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-page"
    >
      <h3 class="form-title">{{$t('login.title')}}</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginModel.username" auto-complete="off" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginModel.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;backgroundColor: #009a61;borderColor: #008151;" @click="handleSubmit" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
  .login-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login-page {
    border-radius: .05rem;
    width: 4rem;
    padding: .35rem  .35rem .15rem;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 .25rem #cac6c6;
  }
  .form-title{
    padding: 0 0 .2rem 0 ;
    font-weight: 600;
    font-size: .22rem;
  }
  label.el-checkbox.rememberme {
    margin: 0px 0px .15rem;
    text-align: left;
  }
</style>

<script>
export default {
  data() {
    return {
      logining: false,
      loginModel:{
        username: "",
        password: ""
      },
      userList: [{
        username: "admin",
        password: "admin000",
        roleType:'001'
      },{
        username: "yuchenglong",
        password: "ycl000",
        roleType:'002'
      },{
        username: "shiyonglong",
        password: "syl000",
        roleType:'002'
      },{
        username: "user",
        password: "user000",
        roleType:'003'
      }],
      loginRules: {
        username: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      },
      checked: false
    };
  },
  mounted(){
  },
  methods: {
    // eslint-disable-next-line no-unused-vars
    handleSubmit(event) {
      this.$refs.loginModel.validate(valid => {
        if (valid) {
          let loginFlag =false;
          this.logining = true;
          let loginInfo ={
            username:this.loginModel.username,
            password:this.loginModel.password
          }
          this.userList.forEach(value=>{
            let user =JSON.parse(JSON.stringify(value));
            if(JSON.stringify(user).indexOf(JSON.stringify(loginInfo))){            
              loginFlag = true;
            }
          });
          if (loginFlag) {
            this.logining = false;
            sessionStorage.setItem("user", this.loginModel.username);
            this.$router.push({ path: "/" });
          } else {
            this.logining = false;
            this.$alert("username or password wrong!", "info", {
              confirmButtonText: "ok"
            });
          }
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },
    isObjEqual(o1,o2){
      var props1 = Object.getOwnPropertyNames(o1);
      var props2 = Object.getOwnPropertyNames(o2);
      if (props1.length != props2.length) {
        return false;
      }
      for (var i = 0,max = props1.length; i < max; i++) {
        var propName = props1[i];
        if (o1[propName] !== o2[propName]) {
          return false;
        }
      }
      return true;
    }
  }
};
</script>
